<!DOCTYPE html>
<html>
<head>
  <script src="../../processing.js"></script>
<link rel="stylesheet" href="../style.css"/></head>
<body><h1><a href="http://ejohn.org/blog/processingjs/">Processing.js</a></h1>
<h2>CreateGraphics</h2>

<p>The createGraphics() function creates an object from the PGraphics class 
(PGraphics is the main graphics and rendering context for Processing). 
The beginDraw() method is necessary to prepare for drawing and endDraw() is
necessary to finish. Use this class if you need to draw into an off-screen 
graphics buffer or to maintain two contexts with different properties.</p>

<p><a href="http://processing.org/learning/basics/creategraphics.html"><b>Original Processing.org Example:</b> CreateGraphics</a><br>
<script type="application/processing">
PGraphics pg;

void setup() {
  size(200, 200);
  pg = createGraphics(80, 80);
}

void draw() {
  fill(0, 12);
  rect(0, 0, width, height);
  fill(255);
  noStroke();
  ellipse(mouseX, mouseY, 60, 60);
  
  pg.beginDraw();
  pg.background(102);
  pg.noFill();
  pg.stroke(255);
  pg.ellipse(mouseX-60, mouseY-60, 60, 60);
  pg.endDraw();
  
  image(pg, 60, 60); 
}
</script><canvas width="200" height="200"></canvas></p>
<div style="height:0px;width:0px;overflow:hidden;"><img src='data/mask.jpg' id='mask.jpg'/><img src='data/test.jpg' id='test.jpg'/></div>

<pre><b>// All Examples Written by <a href="http://reas.com/">Casey Reas</a> and <a href="http://benfry.com/">Ben Fry</a>
// unless otherwise stated.</b>
PGraphics pg;

void setup() {
  size(200, 200);
  pg = createGraphics(80, 80);
}

void draw() {
  fill(0, 12);
  rect(0, 0, width, height);
  fill(255);
  noStroke();
  ellipse(mouseX, mouseY, 60, 60);
  
  pg.beginDraw();
  pg.background(102);
  pg.noFill();
  pg.stroke(255);
  pg.ellipse(mouseX-60, mouseY-60, 60, 60);
  pg.endDraw();
  
  image(pg, 60, 60); 
}</pre>
</body>
</html>
